<script setup>
import { reactive, ref } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router=useRouter()
let currentFirst = ref([])

const itemsData = reactive([{
    name: '建筑工程',
    id:0,
    hot: [{
        name: '一级建筑师'
    }, {
        name: '二级建筑师'
    }],
    children: [{
        name: '一级建筑师'
    }, {
        name: '二级建筑师'
    }]
}, {
    name: '消防安全',
    id:1,
    hot: [{
        name: '初级消防员'
    }, {
        name: '中级消防员'
    }],
    children: [{
        name: '初级消防员'
    }, {
        name: '中级消防员'
    }]
}])
function showTwo(item) {

    currentFirst.value = item.children;
}
function goTo(id){
    console.log(id)
    router.push('/kaoshi/index?id='+id)
}
</script>

<template>
    <div class="nav-container">
        <div class="first-nav">
            <div class="item" v-for="item, index in itemsData" :key="index" @mouseenter="showTwo(item)">
                <div class="title-container">
                    <span class="title">{{ item.name }}</span>
                    <el-icon class="icon" :size="18">
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="text-container">
                    <span class="text" v-for="item1, index1 in item.children" :key="index1" @click="goTo(item1.id)">{{ item1.name }}</span>
                </div>
            </div>
            <div class="two-nav">
                <div v-for="item, index in currentFirst" :key="index">
                    <span class="text">
                       {{ item.name }} 
                    </span>
                </div>
            </div>
        </div>

    </div>
</template>
<style scoped >
.nav-container {
    --first-width: 350px;
    --first-background: #f0f5fd;
    position: relative;
    width: 100%;
}

.first-nav {
    width: var(--first-width);
    background: var(--first-background);
    position: relative;
}

.first-nav .item {
    position: relative;
    padding: 3px 6px;
}

.first-nav .item:hover {
    background: white;
}

.first-nav .item:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: blue;
}

.first-nav .item .title-container {
    line-height: 30px;
}

.first-nav .item .title {
    color: black;
    font-size: 18px;
}

.first-nav .item:hover .title {
    color: #409eff;
}

.first-nav .item .text,.two-nav .text {
    margin-right: 1em;
}

.first-nav .item .text:hover,.two-nav .text:hover {
    cursor:pointer;
    color: #409eff;
}

.first-nav .item .text-container {
    line-height: 28px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
}

.item .icon {
    float: right;
}

.item:hover .icon {
    display: none;
}

.two-nav {
    /* width: calc(100% - var(--first-width)); */
    width:calc(100vw - var(--first-width) - var(--padding-left-right) - var(--padding-left-right));
    height:100%;
    background: white;
    display: none;
    padding: 0 40px;
    position:absolute;
    top:0;
    left:var(--first-width);
}

.first-nav:hover .two-nav {
    display: inline-block;
}</style>